<template>
  <div class="team-tools" >
    <!--<tooltip template='团队建设' name='globe' active="active" index="1" @changeActive="changeActive"></tooltip>-->
    <!--<tooltip template='@我的消息' name='comment-alt'index="2" @changeActive="changeActive"></tooltip>-->
    <!--<tooltip template='搜索' name='search'index="3" @changeActive="changeActive"></tooltip>-->
    <!--<tooltip template='标签' name='tag' index="4" @changeActive="changeActive"></tooltip>-->
    <!--<tooltip template='收藏' name='star' index="5" @changeActive="changeActive"></tooltip>-->
    <!--当数据是静态时,我就没办法很好的render了.因为我拿不到这样一个数据,因为他不是数组生成的.我只有改变数组,才能产生变化.-->
    <tooltip v-for='(index,t) in tooltips'
             :template='t.template'
             :name='t.name'
             :index='index'
             :active='t.active'
             ></tooltip>
    <!--我不得不说,这个跟react的思维基本是一样的,只不过react是在render中做这些操作.这个v-for的用法和ko是很不一样的.他是循环当前模板.-->
    <!--而knockout.js中是对父对象,我感觉这种vue里面这种实现更合理.-->

    <!--写到晚上的时候发现了一个bug,如果我们通过直接输入路由地址进入这个界面,那么点击的这些状态也不会被触发,所以,我觉得这些状态active的管理-->
    <!--还是应该放在vuex中管理,这样在激活这个界面的时候,可以对这些active进行数据的改变.这样就Ok了.-->
   <div class="line"></div>
   <user-corner></user-corner>
  </div>
</template>
<style >

</style>
<script>
import Tooltip from './Tooltip.vue'
import UserCorner from './UserCorner.vue'
import Vue from 'vue'
    export default{
      
        data(){
          //这个tooltips,可以是从vuex管理的store中返回的数据.
            return{
              tooltips : [ {template:"团队建设",name:"globe",active:true},
              {template:"@我的消息",name:"comment-alt",active:false},
              {template:"搜索",name:"search",active:false},
              {template:"标签",name:"tag",active:false},
              {template:"收藏",name:"star",active:false}
            ]
            }
        },
        components:{
          Tooltip,
          UserCorner
        }
      ,
      events:{
          ['tooltip-index'](i){
          this.tooltips.forEach((t,index)=>{
            t.active = i == index;
          })
          switch (i){
            case 1 :
              this.$route.router.go('/Login')
              break;
            case 2 :
              this.$route.router.go('/main/waterfall')
              break;
            case 3 :
              console.log(i);
              break;
            case 4 :
              console.log(i);
              break;
            default:
              this.$route.router.go('/main/home')
            }
          }
      }
    }
</script>
